<!-- 新房 -->
<template>
	<view class="Bridalchamber">
		<view class="header">
			<uni-search-bar placeholder="输入楼盘名或地址" @confirm="search"></uni-search-bar>
			<view class="screen">
				<view class="screen_btn" @click="open1">区域 ></view>
				<view class="screen_btn" @click="open2">价格 ></view>
				<view class="screen_btn" @click="open3">类型 ></view>
			</view>
		</view>
		<Item :list="list"></Item>
		<u-picker :show="show" :columns="columns" @cancel="cancel()" @close="close()" closeOnClickOverlay="true"
			:title="title" @confirm="confirm()">
		</u-picker>
	</view>
</template>

<script>
	import {
		getListApi
	} from '@/api/index.js'
	import Item from '@/components/Item.vue';
	export default {
		data() {
			return {
				list: [],
				show: false,
				title: '',
				columns: [],
				columns1: [
					['不限', '龙华区', '青山区', '美兰区']
				],
				columns2: [
					['不限', '10000以下', '10000-15000', '15000-20000', ]
				],
				columns3: [
					['不限', '住宅', '别墅', '商铺', ]
				]
			}
		},
		created() {
			this.getList()
		},
		methods: {
			async getList() {
				const res = await getListApi()
				this.list = res.data
			},
			open1() {
				console.log(111);
				this.show = true
				this.title = '区域'
				this.columns = this.columns1
				uni.hideTabBar()
			},
			open2() {
				this.show = true
				this.title = '价格'
				this.columns = this.columns2
				uni.hideTabBar()
			},
			open3() {
				this.show = true
				this.title = '类型'
				this.columns = this.columns3
				uni.hideTabBar()
			},
			confirm(e) {
				console.log(e.value[0]);
				this.show = false
				uni.showTabBar()
			},
			cancel() {
				this.show = false
				uni.showTabBar()
			},
			close() {
				this.show = false
				uni.showTabBar()
			}
		},
		components: {
			Item
		}
	}
</script>

<style lang="scss">
	.Bridalchamber {
		width: 100%;
		height: 100%;

		.header {
			width: 100%;
			height: 100px;
			margin-bottom: 10px;
			display: flex;
			flex-direction: column;

			.screen {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				height: 44px;
			}

			.screen_btn {
				flex: 1;
				text-align: center;
				color: #919191;
			}
		}

		.content {
			width: 100%;
			height: calc(100% - 100px);
		}


	}
</style>
